<template>
	<view>
		<view class="fixed-bg-blue">
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">公积金计算</block>
			</cu-custom>
			<view class="margin-lr margin-top radius-lg shadow shadow-lg bg-white padding-top-sm relative">
				<view class="cu-form-group solid-bottom">
					<view class="text-xxxl-important title">￥</view>
					<input placeholder="请输入公积金缴纳金额" name="input" type="digit" :value="currentHousingFundAmount"
						class="text-xxxl-important text-left text-bold" :disabled="housingFundSelected !== 'custom'"
						@blur="changeHousingFundAmount" @confirm="changeHousingFundAmount"></input>
				</view>
				<view class="text-left margin-left-lg padding-tb-sm">
					公积金缴纳基数范围：<text
						class="text-blue">{{socialRateBase.minHousingFundAmount}}~{{socialRateBase.maxHousingFundAmount}}</text>
				</view>
			</view>
		</view>
		<view class="padding text-center">
			<view class="flex flex-wrap justify-between align-center">
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='low'>
					<button class="cu-btn lg shadow"
						:class="housingFundSelected === 'low' ? 'bg-blue' : 'lines-blue'">最低</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='high'>
					<button class="cu-btn lg shadow"
						:class="housingFundSelected === 'high' ? 'bg-blue' : 'lines-blue'">全额</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='custom'>
					<button class="cu-btn lg shadow"
						:class="housingFundSelected === 'custom' ? 'bg-blue' : 'lines-blue'">自定义</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='none'>
					<button class="cu-btn lg shadow"
						:class="housingFundSelected === 'none' ? 'bg-blue' : 'lines-blue'">不缴纳</button>
				</view>
			</view>

			<view class="cu-card margin-top bg-white shadow shadow-lg">
				<view class="cu-form-group">
					<view class="title">缴纳比例</view>
					<picker @change="changeRate" :value="currentHousingFundRateIndex" :range="rateRange">
						<view class="picker">
							{{ rateRange[currentHousingFundRateIndex] || '--' }} %
						</view>
					</picker>
				</view>
			</view>

			<view class="margin-top bg-white shadow">
				<view class="grid margin-bottom text-center col-4">
					<view class="padding-sm bg-blue">项目</view>
					<view class="padding-sm bg-blue">单位缴纳</view>
					<view class="padding-sm bg-blue">个人缴纳</view>
					<view class="padding-sm bg-blue">合计</view>

					<view class="padding-sm">公积金</view>
					<view class="padding-sm">{{ housingFundInfo.companyAmount || '--' }}</view>
					<view class="padding-sm">{{ housingFundInfo.personalAmount || '--' }}</view>
					<view class="padding-sm">{{ housingFundInfo.totalAmount || '--' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		getCalcAmount
	} from '@/utils/common'
	export default {
		data() {
			return {
				rateRange: ['5', '6', '7', '8', '9', '10', '11', '12'],
				currentHousingFundRateIndex: null,
				currentHousingFundAmount: null
			};
		},
		watch: {
			calcResp(val) {
				this.initData()
			}
		},
		mixins: [appMixin],
		onReady() {

		},
		mounted() {
			if (this.calcResp.totalAmount) {
				this.initData()
			} else {
				this.$store.dispatch('calc')
			}
		},
		methods: {
			initData() {
				this.getRateIndex()
				this.currentHousingFundAmount = getCalcAmount(this.housingFundSelected, this.totalAmount, this
					.socialRateBase.minHousingFundAmount, this.socialRateBase.maxHousingFundAmount, this
					.housingFundAmount)
			},
			setPayRatio(e) {
				const selected = e.currentTarget.dataset.selected;
				this.$store.commit('SET_HOUSING_FUND_SELECTED', selected);
				switch (selected) {
					case 'low':
						this.currentHousingFundAmount = this.socialRateBase.minHousingFundAmount
						break;
					case 'high':
						this.currentHousingFundAmount = Math.max(Math.min(this.socialRateBase.maxHousingFundAmount, this
							.totalAmount), this.socialRateBase.minHousingFundAmount)
						break;
					case 'custom':
						this.currentHousingFundAmount = null
						break;
					case 'none':
						this.currentHousingFundAmount = 0;
						break;
				}
				this.$store.dispatch('calc')
			},
			getRateIndex() {
				const rate = this.housingFundRate ? this.housingFundRate : this.socialRateBase.housingFundRate
				this.rateRange.forEach((item, index) => {
					console.log(item, rate, item == rate)
					if (item == rate) {
						this.currentHousingFundRateIndex = index
						return;
					}
				})
				console.log(this.currentHousingFundRateIndex)
			},
			changeRate(e) {
				const value = e.detail.value
				this.currentHousingFundRateIndex = value
				this.$store.commit('SET_HOUSING_FUND_RATE', this.rateRange[value]);
				this.$store.dispatch('calc')
			},
			changeHousingFundAmount(e) {
				this.currentHousingFundAmount = e.detail.value
				this.$store.commit('SET_HOUSING_FUND_AMOUNT', this.currentHousingFundAmount);
				this.$store.dispatch('calc')
			}
		}
	};
</script>

<style scoped>

</style>